<template>
    <div class="box">
        <van-nav-bar
            title="套餐卡快捷收款"
            left-arrow
            @click-left="back()"
            class="navBar"
            :border="false"
        ></van-nav-bar>
        <form action="/">
            <van-search
                v-model="searchValue"
                show-action
                placeholder="请输入搜索条件"
                @search="onSearch"
            >
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </form>
        <div class="order-list">
            <van-cell-group inset>
                <van-cell
                    v-for="item in list"
                    :key="item.count"
                    :border="false"
                >
                    <div class="item">
                        <div class="img-wrap">
                            <van-image
                                width="100%"
                                height="100%"
                                fit="fill"
                                :src="item.photoX"
                            />
                        </div>
                        <div class="right-desc">
                            <div class="name">
                                <span class="name-text ellipsis">{{
                                    item.name
                                }}</span>
                            </div>
                            <div class="money-item">
                                <span class="title">原价:</span>
                                <span class="price old">￥{{ item.price }}</span>
                            </div>
                            <div class="money-item">
                                <span class="title">现价:</span>
                                <span class="price"
                                    >￥{{ item.finalPrice }}</span
                                >
                            </div>
                        </div>
                        <div class="btn-wrap">
                                <!-- v-model="item.isCheckd" -->

                            <van-checkbox
                             v-model="item.isCheckd"
                                checked-color="#5e2f88"
                                label-disabled
                                class="checkbox"
                                @click="showGoods(item)"
                            ></van-checkbox>
                        </div>
                    </div>
                </van-cell>
            </van-cell-group>
        </div>
        <footer>
            <div class="img-wrap" @click="showPopUp">
                <i class="num">{{shopcart.length}}</i>
            </div>
            <div class="total-wrap">
                总金额:
                <span class="red">￥{{total}}</span>
            </div>
            <van-button color="#60348d" class="next" @click="next()"
                >下一步</van-button
            >
        </footer>
    </div>
    <!-- 项目详情Dialog -->
    <van-dialog 
        v-model:show="showDetailDialog" 
        :showConfirmButton="false" 
        :closeOnClickOverlay="true"
        className="detail-dialog"
    >
        <div class="d-content">
            <div class="title">项目明细</div>
            <h4 class="name">{{detailList.name}}</h4>
            <ul class="d-list">
                <li v-for="(detail) in detailList.list" :key="detail.id">
                    <span>【{{detail.comboProjectName}}】</span> 
                    <span>{{detail.comboProjectMaxNum}}{{detail.comboProjectUmit}}</span>
                </li>
            </ul>
        </div>
        
    </van-dialog>
    <!-- 底部弹窗 -->
    <van-popup
        v-model:show="show"
        position="bottom"
        class="popup"
        closeable
        round
        :style="{
            paddingBottom: '5.625rem',
            paddingTop: '.9375rem',
            paddingLeft: '.9375rem',
            paddingRight: '.9375rem',
            boxSizing: 'border-box',
        }"
    >
        <template v-if="shopcart.length">
            <div class="pop-title">
                <b>已选套餐卡</b>
            </div>

            <div class="pop-item" v-for="item in shopcart" :key="item.brandId">
                <div class="name">
                    <span class="name-text ellipsis">{{ item.name }}</span>
                    <van-icon
                        name="delete-o"
                        class="del-icon"
                        size="1.25rem"
                        color="#b0bfc9"
                        @click="del(item)"
                    />
                </div>
                <div class="money-item">
                    <span class="title">价格:</span>
                    <span class="price">￥{{ item.finalPrice }}</span>
                </div>
            </div>
        </template>
        <div class="no" v-else style="padding-bottom: 20px">暂无商品</div>
    </van-popup>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { Toast, Dialog } from "vant";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { comboList, comboDetail } from "api/goods.js";
const router = useRouter();
const store = useStore();
const show = ref(false);
const searchValue = ref();

const list = ref([]); //项目列表
const detailList = reactive({ name: "", list: [] }); //项目明细列表
const shopcart = ref([]); //已选套餐卡
// 底部弹框显示
const showPopUp = () => {
    // show = true;
    show.value = !show.value;
};
//套餐卡搜索
const onSearch = async () => {
    let res = await comboList({ name: searchValue.value, productStatus: "4" });
    var arr = res.data;
    arr.map((item) => {
        item["finalPrice"] = item.isSale == 1 ? item.priceYh : item.price;
        item.isCheckd = false;
    });
    list.value = arr;
};

onMounted(() => {
    onSearch();
});

//返回上一页
const back = () => {
    router.back();
};

//下一步
const next = () => {
    if(shopcart.value.length==0){
        Toast.fail("请先选择一款套餐卡")
        return;
    }
    store.commit("goods/setShopCart", shopcart.value);
    router.push("/goods/confirm/1");
};

const showDetailDialog = ref(false);
const showDialog = ref(false);

//显示套餐详情
const showGoods = async (combo) => {
    // debugger;

    shopcart.value=[];
    list.value=list.value.map(item=>{
        if(item!=combo){
             item.isCheckd=false;
        }
        return item;
    })
    // combo.isCheckd=!combo.isCheckd;



    if (!combo.isCheckd) {
        del(combo);
        return;
    };
    let detail = await comboDetail({ productId: combo.productId });
    detailList.list = detail.data;
    detailList.name = combo.name;
    detailList.photoX = combo.photoX;
    showDetailDialog.value = true;

    
    if(shopcart.value.length==0){
        shopcart.value.push(combo)
        combo.existsCar = true;
    }


};
//显示已选套餐卡
const showCombo = () => {
    showDialog.value = true;
};
//添加套餐卡到购物车
const addToCar = (combo) => {
    console.log(combo);
    combo.existsCar = true;
    shopcart.value.push(combo);
};
//从购物车删除
const del = (item) => {
    item.existsCar = false;
    item.isCheckd = false
    var index = shopcart.value.findIndex((p) => {
        if (item.productId == p.productId) {
            return true;
        }
    });
    shopcart.value.splice(index, 1);
};

//根据购物车商品的变化而计算总金额
const total = computed(() => {
    return shopcart.value.reduce((total, current) => {
        return (total += current.finalPrice);
    }, 0);
});
</script>

<style lang="scss" scoped>
// 去掉默认样式
.van-cell-group {
    margin: 0 !important;
}
// 主要内容
.box {
    background: #f1f5f8;
    min-height: 100vh;

    .navBar {
        background: #fff;
        border: none;
    }
    .order-list {
        padding: 0.9375rem;
        padding-bottom: 5.625rem;
        .item {
            display: flex;
            height: 5.9375rem;
            position: relative;
            line-height: 1;
            color: #101d34;
            box-sizing: border-box;
            .img-wrap {
                width: 5.9375rem;
                height: 5.9375rem;
                border-radius: 0.5rem;
                margin-right: 0.9375rem;
                overflow: hidden;
                flex-shrink: 0;
            }
            .right-desc {
                color: #49596d;
                display: flex;
                flex-direction: column;
                padding-top: 0.625rem;
                line-height: 1;
                .name {
                    font-size: 0.9375rem;
                    display: flex;
                    margin-bottom: 0.9375rem;
                    .name-text {
                        max-width: 9.375rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap; //不能换行
                    }
                }
                .money-item {
                    font-size: 0.75rem;
                    margin-bottom: 0.625rem;
                    .price {
                        color: rgba(243, 95, 105);
                        font-size: 0.875rem;
                        &.old {
                            text-decoration: line-through;
                        }
                    }
                }
            }
            .btn-wrap {
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9999;
        text-align: center;
        width: 100%;
        color: #101d34;
        height: 90px;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0px -10px 32px 8px rgba(0, 0, 0, 0.03);
        border-radius: 0.9375rem 0.9375rem 0px 0px;
        padding: 0.9375rem;
        display: flex;
        justify-content: space-between;
        .img-wrap {
            width: 2.75rem;
            height: 2rem;
            background: url(../../assets/icon_k.png) no-repeat 0 0;
            background-size: contain;
            position: relative;
            .num {
                width: 0.9375rem;
                height: 0.9375rem;
                text-align: center;
                line-height: 0.9375rem;
                border-radius: 50%;
                background-color: #f13845;
                position: absolute;
                right: -0.375rem;
                top: -0.375rem;
                font-style: normal;
                font-size: 0.75rem;
                color: white;
            }
        }
        .total-wrap {
            margin-left: 2.5rem;
            margin-top: 0.375rem;
            .red {
                color: #f13f4b;
            }
        }
    }
}
// 明细对话框
.detail-dialog {
    color: #101d34;
    .d-content {
        padding: 0.9375rem;
        .d-list {
            text-align: left;
            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 2.25rem;
            }
        }
    }
    .title {
        font-size: 1.125rem;
        padding-bottom: 0.9375rem;
    }
    .name {
        text-align: left;
        margin: 0;
        padding: 0.9375rem 0;
        border-top: 1px solid #e5ebef;
    }
}
// 底部弹框 popup
.pop-title {
    font-size: 1.125rem;
    position: relative;
    color: #101d34;
    .close {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
.pop-item {
    border-bottom: 1px solid #e5ebef;
    line-height: 1;
    padding-top: 1.25rem;
    padding-bottom: 0.625rem;
    color: #101d34;
    position: relative;
    &:last-of-type {
        border: none;
    }
    .name {
        margin: 0.3125rem 0 1.25rem 0;
        font-size: 0.9375rem;
        display: flex;
        position: relative;
        .name-text {
            max-width: 7.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; //不能换行
            font-size: 1rem;
        }
        .del-icon {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .tip {
            width: 4.375rem;
            height: 0.9375rem;
            font-size: 0.6875rem;
            background-color: rgba(232, 249, 237);
            text-align: center;
            line-height: 0.9375rem;
            border-radius: 0.5rem;
            padding: 1px 0;
            color: #1fc853;
            margin-left: 0.625rem;
            flex-shrink: 0;
            &.blue {
                color: #13a3ff;
                background-color: rgba(231, 246, 255);
            }
            &.orange {
                color: #ff9e13;
                background-color: rgba(255, 245, 231);
            }
        }
    }
    .money-item {
        font-size: 0.75rem;
        margin-bottom: 0.625rem;
        text-align: left;
        .price {
            color: rgba(243, 95, 105);
            font-size: 0.875rem;
            &.old {
                text-decoration: line-through;
            }
        }
    }
    .btn-wrap {
        width: 5.75rem;
        height: 1.5625rem;
        border: 1px solid #8195a5;
        border-radius: 0.3125rem;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        position: absolute;
        right: 0;
        bottom: 1.8125rem;
        .btn {
            width: 1.5625rem;
            height: 1.5625rem;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            &:first-of-type {
                border-right: 1px solid #8195a5;
            }
            &:last-of-type {
                border-left: 1px solid #8195a5;
            }
        }
        .num {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #101d34;
            font-size: 1rem;
        }
    }
}
</style>
<style scoped>
form :deep() .van-search__content {
    border-radius: 1rem;
}
.money :deep() .van-cell__value {
    color: #f13845;
    font-size: 0.875rem;
}
.box :deep() .van-cell__title {
    text-align: left;
}
.order-list :deep() .van-cell-group {
    background-color: #f1f5f8;
}
.order-list :deep() .van-cell {
    margin-bottom: 0.9375rem;
    border-radius: 0.625rem;
}
.box :deep() .van-cell.money {
    line-height: 1;
    padding: 1.1875rem 0.9375rem 0.9375rem;
}

footer .van-button {
    width: 5.3125rem;
    height: 2.375rem;
    background: linear-gradient(10deg, #5e2f88, #694aa5);
    border-radius: 1.1875rem;
}
</style>